import React, { Component } from 'react';
import { Form, Input, Row, Col, Button, message, Select } from 'antd';
import isEmpty from 'lodash/isEmpty'
import regionJson from './region'
import styles from "./addressForm.less"
const { Option } = Select;

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 18 }
}
class RegistrationForm extends Component{

  formRef = React.createRef()

  constructor(props){
    super(props)
    this.state = {
      provinceData: regionJson.map(item => {
        return {
          code: item.code,
          name: item.name
        }
      }),
      cityData: [],
      areaData: []
    }
  }

  handleProvinceChange(e) {
    const form = this.formRef.current
    const { setFieldsValue } = form
    setFieldsValue({
      'area': null,
      'city': null
    })
    let city = regionJson.find(item => {
      return item.name == e
    })
    if (!isEmpty(city)) {
      let cityArray = city.child
      this.setState({
        cityData: cityArray
      })
    }
  }

  resetForm() {
    const form = this.formRef.current
    if (form) {
      const { resetFields } = form
      resetFields()
    }
  }

  onSecondCityChange(e) {
    const form = this.formRef.current
    const { getFieldValue, setFieldsValue } = form
    setFieldsValue({
      'area': null,
    })
    let city = regionJson.find(item => {
      return item.name == getFieldValue('province')
    })
    let area = city.child.find(item => {
      return item.name == e
    })
    if (!isEmpty(area)) {
      let areaArray = area.child
      this.setState({
        areaData: areaArray
      })
    }
  }

  setForm() {
    const { detail, isEdit } = this.props
    const form = this.formRef.current
    if (isEdit) {
      const { setFieldsValue } = form
      const { mobile, addressee, address, id } = detail
      setFieldsValue({
        mobile,
        addressee,
        province: address.split(' ')[0] || '',
        city: address.split(' ')[1] || '',
        area: address.split(' ')[2] || '',
        address: address.split(' ')[3] || '',
      })
    }
  }

  componentDidMount() {
    this.setForm()
  }

  render() {
    const { provinceData, cityData, areaData } = this.state
    const { onFinish, detail } = this.props
    return (
      <Form
        className={styles.addressForm}
        ref={ this.formRef }
        name="register"
        onFinish={e => onFinish.call(this, e, detail.id) }
        scrollToFirstError
      >
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="addressee"
              label="收件人"
              {...formItemLayout}
              rules={[
                {
                  required: true,
                  message: '请输入收件人姓名'
                },
              ]}
            >
              <Input placeholder="请输入收件人姓名" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              name="mobile"
              label="手机号码"
              {...formItemLayout}
              rules={[
                {
                  required: true,
                  message: '请输入收件人手机号码'
                },
              ]}
            >
              <Input maxLength={11} placeholder="请输入收件人手机号码" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={12}>
            <Form.Item
              label="地址信息："
              name='province'
              {...formItemLayout}
              rules={[
                {
                  required: true,
                  message: '请选择省'
                }
              ]}
            >
              <Select style={{ width: 140 }} onChange={this.handleProvinceChange.bind(this)} placeholder="请选择省">
                {provinceData.map(province => (
                  <Option key={province.code} value={province.name}>{province.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col className={'cityItem'}>
            <Form.Item
              label=""
              name='city'
              rules={[
                {
                  required: true,
                  message: '请选择市'
                }
              ]}
            >
              <Select style={{ width: 140, marginLeft: -45 }} onChange={this.onSecondCityChange.bind(this)} placeholder="请选择市">
                {cityData.map(city => (
                  <Option key={city.code} value={city.name}>{city.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
          <Col className={'areaItem'}>
            <Form.Item
              label=""
              name='area'
              rules={[
                {
                  required: true,
                  message: '请选择区'
                }
              ]}
            >
              <Select style={{ width: 140, marginLeft: -14 }} placeholder="请选择区">
                {areaData.map(area => (
                  <Option key={area.code} value={area.name}>{area.name}</Option>
                ))}
              </Select>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={24}>
            <Form.Item
              name="address"
              label="注册地址："
              rules={[
                {
                  required: true,
                  min: 8,
                  message: '注册地址（不少于8个字）'
                },
              ]}>
              <Input.TextArea placeholder="请输入注册地址（不少于8个字）" style={{width: 441}}/>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item style={{textAlign: 'center'}}>
          <Button className={'loginBtn'} type="primary" htmlType="submit">
            保存
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

export default RegistrationForm